<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${CPATH}/static/rbh/css/main.css">
    <title>软博会交易平台</title>
    <script>
        (function() {
            var changeRem = function() {
                var deviceWidth =  document.documentElement.clientWidth;
                if (deviceWidth < 1180) {
                    deviceWidth = 1180;
                }
                document.documentElement.style.fontSize = deviceWidth/19.2 + 'px';
            };
            changeRem();
            var t;
            window.addEventListener('resize', function() {
                clearTimeout(t);
                t = setTimeout(changeRem, 300);
                window.location.reload();

            }, false);
            window.addEventListener('pageshow', function(e) {
                if (e.persisted) {
                    clearTimeout(t);
                    t = setTimeout(changeRem, 300);
                }
            }, false);
        }());
    </script>
</head>
<body>
<div class="main">
    <div class="consult">
        <ul class="consult-label tab">
            <li class="current" data-day="D1">D1</li>
            <li data-day="D2">D2</li>
            <li data-day="D3">D3</li>
        </ul>
        <div class="consult-title">用户咨询量</div>
        <div class="consult-line" id="echart-line"></div>
    </div>
    <div class="middle-carouse">
        <div id="carousel" class="carousel">
            <div class="carousel-inner">
                <ul class="carousel-inner-wrap fn-clear">
                    <li class="carousel-inner-wrap-cell">
                        <img src="${CPATH}/static/rbh/img/main1.png">
                    </li>
                    <li class="carousel-inner-wrap-cell">
                        <img src="${CPATH}/static/rbh/img/main2.jpg">
                    </li>
                    <li class="carousel-inner-wrap-cell">
                        <img src="${CPATH}/static/rbh/img/main3.png">
                    </li>
                    <li class="carousel-inner-wrap-cell">
                        <img src="${CPATH}/static/rbh/img/main2.jpg">
                    </li>
                    <li class="carousel-inner-wrap-cell">
                        <img src="${CPATH}/static/rbh/img/main3.png">
                    </li>
                </ul>
            </div>
            <div class="carousel-dot"><span class="selected"></span><span></span><span></span><span></span><span></span></div>
        </div>
    </div>
    <div class="tradevenue">
        <div class="tradevenue-bar tradevenu-bar1" id="echart-bar1"></div>
        <div class="tradevenue-bar tradevenu-bar2" id="echart-bar2"></div>
    </div>
    <div class="left2">
        <img src="${CPATH}/static/rbh/img/left2.jpg" alt="">
    </div>
    <div class="left3">
        <img src="${CPATH}/static/rbh/img/left3.jpg" alt="">
    </div>
    <div class="left4">
        <img src="${CPATH}/static/rbh/img/left4.jpg" alt="">
    </div>
    <div class="right1">
        <img src="${CPATH}/static/rbh/img/right1.jpg" alt="">
    </div>
    <div class="right2">
        <img src="${CPATH}/static/rbh/img/right2.jpg" alt="">
    </div>
    <div class="right3">
        <img src="${CPATH}/static/rbh/img/right3.jpg" alt="">
    </div>

</div>
<script src="${CPATH}/static/rbh/js/zepto.js"></script>
<script src="${CPATH}/static/rbh/js/jquery.min.js"></script>
<script src="${CPATH}/static/rbh/js/echarts.min.js"></script>
<script src="${CPATH}/static/rbh/js/carousel.js"></script>
<script src="${CPATH}/static/rbh/data/data.js"></script>
<script>
    lineData = ${(lineData)};
    bar1 = ${(bar1)};
    bar2 = ${(bar2)};

    $.noConflict()
    $('.tab li').on('click', function () {
        $(this).addClass('current').siblings().removeClass('current')
    })

    var onlyone = true;
    window.onfocus = function() {
        if (onlyone) {
            setCarousel($('#carousel'))
            $("#carousel").focusImg({
                interval : 3000,
                speed: 2000
            });
        }
    };

    setCarousel($('#carousel'));

    $("#carousel").focusImg({
        interval : 3000,
        speed: 2000
    });

    function setCarousel ($target) {
        var htmlstr = '<div class="carousel-inner">'
            + '<ul class="carousel-inner-wrap fn-clear">'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main1.png">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main2.jpg">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main3.png">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main4.jpg">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main5.png">'
            +	'</li>'
            + '</ul>'
            + '</div>'
            + '<div class="carousel-dot"><span class="selected"></span><span></span><span></span><span></span><span></span></div>';
        $target.html(htmlstr)
    }

    refreshData();
    function refreshData() {
        $.getJSON("${(CPATH)}/data/refreshData?_req="+new Date(),function (data) {
            var json = $.parseJSON(data.data);
            bar1 = $.parseJSON(json.bar1);
            bar2 = $.parseJSON(json.bar2);
        });
        setTimeout(refreshData,2000);
    }
</script>
<!-- 用户咨询量折线图 -->
<script>
    $(function () {
        var echartLine = echarts.init($('#echart-line')[0])
        var option = {
            color: ['#e9081a', '#51cfcc', '#0d3eb7', '#0d3eb7', '#f9b01f'],
            title: {
                text: ''
            },
            textStyle: {
                color: '#7186a3'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['汇报馆','商业馆','生活馆','综合馆','智能制造馆'],
                bottom : '16px',
                textStyle : {
                    color: '#7186a3'
                }
            },
            grid: {
                left: '3%',
                rigth: '4%',
                top: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                splitNumber: 4,
            },
            series: [
                {
                    name: '汇报馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,

                    data: []
                },
                {
                    name: '商业馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,
                    data: []
                },
                {
                    name: '生活馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,

                    data: []
                },
                {
                    name: '综合馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,
                    data: []
                },
                {
                    name: '智能制造馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,
                    data: []
                },
            ]
        }
        echartLine.setOption(option);
        var dataTarget = '';
        var liTarget = 'D1';
        var data = {
            "D1" : {
                "categories" : [],
                "report": [],
                "business": [],
                "life": [],
                "comprehensive": [],
                "intelligent": []
            },
            "D2": {
                "categories" : [],
                "report": [],
                "business": [],
                "life": [],
                "comprehensive": [],
                "intelligent": []
            },
            "D3": {
                "categories" : [],
                "report": [],
                "business": [],
                "life": [],
                "comprehensive": [],
                "intelligent": []
            }
        }

        refreshData();
        function refreshData() {
            if(lineData[liTarget].categories.length==0){
                $.ajaxSettings.async = false;
                $.getJSON("${(CPATH)}/data/refreshData?_req="+new Date(),function (data) {
                    var json = $.parseJSON(data.data);
                    var tempData = $.parseJSON(json.lineData);
                    lineData[liTarget] = tempData[liTarget];
                });
                data[liTarget].categories=[];
                data[liTarget].report=[];
                data[liTarget].business=[];
                data[liTarget].life=[];
                data[liTarget].comprehensive=[];
                data[liTarget].intelligent=[];
            }
            data[liTarget].categories.push(lineData[liTarget].categories.shift());
            data[liTarget].report.push(lineData[liTarget].report.shift());
            data[liTarget].business.push(lineData[liTarget].business.shift());
            data[liTarget].life.push(lineData[liTarget].life.shift());
            data[liTarget].comprehensive.push(lineData[liTarget].comprehensive.shift());
            data[liTarget].intelligent.push(lineData[liTarget].intelligent.shift());

            if (data[liTarget].categories.length>5){
                data[liTarget].categories.shift();
                data[liTarget].report.shift();
                data[liTarget].business.shift();
                data[liTarget].life.shift();
                data[liTarget].comprehensive.shift();
                data[liTarget].intelligent.shift();
            }

            setLineChart(data[liTarget]);
            setTimeout(refreshData,2000);
        }

        $('.consult-label li').on('click', function () {
            liTarget = $(this).data('day');
            dataTarget = data[liTarget];
            setLineChart(dataTarget);
        })
        function setLineChart(data) {
            echartLine.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [
                    {
                        name: '汇报馆',
                        data: data.report
                    },
                    {
                        name: '商业馆',
                        data: data.business
                    },
                    {
                        name: '生活馆',
                        data: data.life
                    },
                    {
                        name: '综合馆',
                        data: data.comprehensive
                    },
                    {
                        name: '智能制造馆',
                        data: data.intelligent
                    }
                ]
            });
        }
    })
</script>
<!-- 场馆交易图 -->
<script>
    $(function () {
        var echartBar1 = echarts.init($('#echart-bar1')[0]);
        var option = {
            color: ['#01d2ff', '#009ec0', '#015769'],
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['需求量','订单数','交易额'],
                textStyle: {
                    color: '#7186a3',
                    fontSize: 10
                },
                right: 0,
                orient: 'vertical',
                itemWidth: 15,
                itemHeight: 6
            },
            textStyle: {
                color: '#7186a3'
            },
            grid: {
                top: '30%'
            },
            xAxis: {
                type: 'category',
                data: [],
            },
            yAxis: {
                type: 'value',
                splitNumber: 4,
                splitLine: {
                    show: false
                },
            },
            series: [
                {
                    name: '需求量',
                    type: 'bar',
                    barGap: 0,
                    data: []
                },
                {
                    name: '订单数',
                    type: 'bar',
                    barGap: 0,
                    data: []
                },
                {
                    name: '交易额',
                    type: 'bar',
                    barGap: 0,
                    data: []
                }
            ]
        }

        echartBar1.setOption(option);
        var data = bar1;

        refreshData();
        function refreshData() {
            data = bar1;
            setBar1Chart(data);
            setTimeout(refreshData,2000);
        }

//        setBar1Chart(data);
        function setBar1Chart(data) {
            echartBar1.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [
                    {
                        name: '需求量',
                        data: data.neednum
                    },
                    {
                        name: '订单数',
                        data: data.ordernum
                    },
                    {
                        name: '交易额',
                        data: data.tradenum
                    },
                ]
            });
        }
    })
</script>
<script>
    $(function () {
        var echartBar2 = echarts.init($('#echart-bar2')[0]);
        var option = {
            color: ['#ff0000', '#8e0a00', '#540600'],
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['需求量总数','现场交易额','线上交易额'],
                textStyle: {
                    color: '#7186a3',
                    fontSize: 10
                },
                orient: 'vertical',
                itemWidth: 15,
                itemHeight: 6,
                left: 0
            },
            textStyle: {
                color: '#7186a3'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value',
                splitNumber: 4,
            },
            grid: {
                left: '30%',
                top: '30%'
            },
            series: [
                {
                    name: '需求量总数',
                    type: 'bar',
                    barGap: 0,
                    barWidth: 20,
                    data: []
                },
                {
                    name: '现场交易额',
                    type: 'bar',
                    barGap: 0,
                    barWidth: 20,
                    data: []
                },
                {
                    name: '线上交易额',
                    type: 'bar',
                    barGap: 0,
                    barWidth: 20,
                    data: []
                }
            ]
        }

        echartBar2.setOption(option);
        var data = bar2;

        refreshData();
        function refreshData() {
            data = bar2;
            setBar2Chart(data);
            setTimeout(refreshData,2000);
        }

//        setBar2Chart(data);
        function setBar2Chart(data) {
            echartBar2.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [
                    {
                        name: '需求量总数',
                        data: data.neednum
                    },
                    {
                        name: '现场交易额',
                        data: data.ordernum
                    },
                    {
                        name: '线上交易额',
                        data: data.tradenum
                    },
                ]
            });
        }
    })
</script>
</body>